
<template>


  <el-row >
    <el-col style="transition: 2s"  :span="12">
      <div id="img"></div>
    </el-col>
    <el-col ref="formInfo" :span="12">
      <el-form  ref="userForm" size="large" id="loginForm" :rules="rules" :model="form">
        <el-form-item label="账号" prop="account">
          <el-input  v-model="form.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password"  v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input  v-model="form.value"></el-input>
          <img  @click="getCode" v-if="form.code!=undefined&&form.code!=''" style="width: 100px;margin: 10px" :src="'http://192.168.2.49:4100/'+path+'/'+form.code+'.png'" />
        </el-form-item>

        <el-row  justify="center">
          <el-col :span="24"><el-button style="width: 100%;padding: 25px 0px" :disabled="enableButton" type="primary" @click="submitForm($refs.userForm)">登录</el-button></el-col>
<!--          <el-col :span="5"  :offset="1"><el-button @click="toRegister">注册</el-button></el-col>-->
        </el-row>
      </el-form>
    </el-col>
  </el-row>


</template>
<script setup>
import {onMounted, onServerPrefetch, onUpdated, reactive, ref} from "vue";
import {checkCount, login,verificationCode,verification} from '../../../request/system/api.js'
import {ElMessage, ElNotification} from "element-plus";
import axios from "axios";
const size=ref(12)
const form =reactive({
  account:'',
  password:'',
  code:'',
  value:''
})
const enableButton=ref(true)

const check= (rule, value, callback)=>{

  checkCount(form.account).then((response)=>{
    console.log(response)
    if(response.exception=="用户不存在"){
      callback(new Error("用户不存在"))
    }else {
      callback()
    }
  })
}
const Verification=(rule,value,callback)=>{
  verification(form.code,form.value).then((response)=>{
    enableButton.value=response.state!="200"
    if(response.state!="200"){

      callback(new Error(response.exception))
    }else {
      callback();
    }
  })
}
const rules=reactive({
  password:[
    {
      required: true,message:"密码不能为空",trigger:'blur'
    },
    {
      max:20,message: "密码最长为20",trigger:'blur'
    }
  ],
  account:[
    {
      required:true,message:"帐号不能为空",trigger:'blur'
    },
    {
      validator: check,trigger:'blur'
    }
  ],
  code:[
    {
      required:true,message:"验证码不能为空",trigger:'blur'
    },
    {
      validator: Verification,trigger:'blur'
    }
  ]
})
import {toStore} from '../../../stores/counter.js'
import {router} from "../../../router/index.js";
const path=ref()
const toRegister=()=>{
  router.push({"name":"register"})
}
const submitForm = async (formEl) => {
  if (!formEl) return

  await formEl.validate((valid, fields) => {
    if (valid) {
      login(form).then(async (response) => {
        if (response.state == "200") {
          ElNotification({
            title: '成功',
            message: '登录成功',
            type: 'success',
          })
          const store = toStore();
          store.token = response.data[0]
          await localStorage.setItem("store", JSON.stringify(store))
          await router.push("/admin")

        } else {

        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const getCode=()=>{
  verificationCode().then((response)=>{
    form.code=response.data[0].id
    path.value=response.data[0].path
  })

}
onMounted(()=>{
  getCode()

})
</script>

<style scoped>
#img{
  background-image: url("../../../assets/bg.jpg");
  height: 100%;
  background-size: cover;
}
#loginForm{
  padding: 10px;
}
.el-form{
  min-height: 55vh;
}
</style>
